<template>
	<view class="main">
		<u-sticky offset-top="0">
			<view class="search">
				<u--input prefixIcon="search" border="none" color="#333333" placeholderStyle="font-size:12px"
					placeholder="输入藏品名称" v-model="key" focus prefixIconStyle="font-size: 22px;color: #909399">
				</u--input>
				<view class="ttt" @click="submit">搜索</view>
			</view>
		</u-sticky>
		<view class="collection">
			<u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading">
				<view class="indexs-list">
					<view class="indexs-list-item fadeInUp" :style="!(index % 2 && index!=0) ?'' :'margin-left:25rpx'" @tap="toPage(`/subpage/Product/details?id=${item.id}`)" v-for="(item,index) in list" :key="index" >
						<view class="item-shopimg">
							<image :src="item.thumb" mode="aspectFill"></image>
						  <!--  <view class="item-nullimg" v-if="!item.sell_status && (item.all_count==item.sale_count) && !(item.time>0)">
						    	<image src="@/static/images/login/bianzuname.png" mode=""></image>
						    </view> -->
						
						</view>
						<view class="item-shopInfo">
							<view class="item-shopInfo-name">
								<text>{{item.title}}</text>
							</view>
						     <view class="item-shopInfo-money">
								 <text>￥</text>
						     	<text>{{item.price?item.price:item.base_price}}</text>
						     </view>
							 
						</view>
						<view class="item-shopname">
							<view class="item-shopname-info">
								<view class="item-shopname-info-img">
									<image :src="item.portrait" mode=""></image>
								</view>
								
							    <text>{{item.user_name}}</text>
							</view>
							<view class="item-shopname-num">
								<text>限量{{item.all_count}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="kgzw" v-if="total % 2 == 1"></view>
				<block v-if="!loading && list.length < 1" >
					<Empty text="暂无搜索内容"></Empty>
				</block>
				<view class="Isend" v-else-if="list.length == total && this.total > 2">已经到底了</view>
				<view class="Isend" @click="getList" v-else-if="list.length < this.total">下拉加载更多</view>
			</u-skeleton>
		</view>

		<u-modal :show="show" @confirm="GoDel" asyncClose content="确定删除全部历史记录？" @cancel="show = false" confirm-text="确定"
			show-cancel-button></u-modal>

		<u-back-top :scroll-top="scrollTop" :customStyle="customStyles" :iconStyle="iconStyle"></u-back-top>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js';
	import Empty from '@/components/Empty.vue';
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				key: '',
				list: '',
				hlist: '',
				typeList: '',
				loading: false,
				priceList: [{
						title: '由低到高',
						type: '1'
					},
					{
						title: '由高到低',
						type: '2'
					}
				],
				typeid: 0,
				show: false,
				prtype: 1,
				listid: '',
				total: '',
				page: 1,
				size: 10,
				showgood: false,
				scrollTop: 0,
				iconStyle: {
					color: '#000000'
				},
				customStyles: {
					width: '50rpx',
					background: '#F3E0BC',
					right: '50rpx',
					right: '0'
				}
			};
		},
		onShow() {},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.getgoodList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {

			seacher() {
				if (this.showgood) {
					this.submit();
				}
			},

			submit() {
				if (this.key) {
					this.page = 1;
					this.getgoodList();
				} else {
					uni.$u.toast('请输入要搜索的名称');
				}
			},
			async getgoodList() {
				// this.loading = true;
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
						search: this.key,
						type: 1
					}
				});
				this.loading = false;
				let list = data.data;
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = [];
					}
					this.total = list.total;
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data);
						this.page += 1;
					}
				} else {
					return [];
				}
			},

			back() {
				// uni.navigateBack(-1)
				this.showgood = false;
				this.key = '';
				this.listid = '';
			},



		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 88rpx);
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		background-color: $nft-bg-color;
	
	::v-deep .u-transition {
			right: 0 !important;
		}
	
	.ftop {
			position: fixed;
			width: calc(100% - 60rpx);
			background: $nft-bg-color;
			z-index: 100;
			padding: 30rpx 0 10rpx;
		}

		.Isend {
			font-size: 28rpx;
			font-weight: 400;
			color: #808080;
			line-height: 36rpx;
			text-align: center;
			margin: 16rpx;
			width: 100%;
		}

		.search {
			height: 68rpx;
			// background: #f8f8f8;
			display: flex;
			align-items: center;
			padding: 0 26rpx;

			.iis {
				height: 30rpx;
				width: 30rpx;
			}

			.input {
				border: none;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				line-height: 36rpx;
			}
			.u-input {
				background: #F5F5FA;
				border-radius: 44rpx;
				padding: 20rpx !important;
				.uni-input-placeholder {
					color: #A1A1AB;
				}
			}

			.ttt {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 600;
				color: #101010;
				line-height: 36rpx;
				margin-left: 30rpx;
				border: none;
			}
		}

		.card {
			margin: 120rpx 0rpx;

			.lins {
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;

				.title {
					flex: 1;
				}

				.scico {
					height: 34rpx;
					width: 40rpx;
					margin-right: 25rpx;
				}
			}

			.title {
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				line-height: 36rpx;
				margin: 14rpx 0;
			}

			.u-list {
				display: flex;
				flex-wrap: wrap;
				min-height: 100rpx;

				.item {
					height: 48rpx;
					background: #202121;
					border-radius: 4rpx;
					padding: 0 26rpx;
					margin: 10rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #faeac5;
					line-height: 48rpx;
				}

				.act {
					background: #faeac5;
					color: #000000;
				}
			}
		}

		.collection {
			padding-top: 10rpx;
			display: flex;

			.u-skeleton {
				flex-direction: row;
				flex-wrap: wrap;
				// justify-content: center;

			}

			::v-deep .kgzw {
				// font-size: 200px;
				width: calc(50% - 18rpx);
			}

			.item {
				background: #FFFFFF;
				box-shadow: 2px 2px 8px 3px rgba(230, 230, 230, 0.5);
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				width: calc(50% - 18rpx);
				margin: 11rpx 12rpx 11rpx 6rpx;

				.img {
					position: relative;

					.boximg {
						width: 100%;
						height: 322rpx;
						overflow: hidden;
						background: url(@/static/images/shopbg.png) no-repeat;
						background-size: cover;
					}

					image {
						width: 100%;
						height: 322rpx;
						border-radius: 10rpx 10rpx 0px 0px;
					}

					.ts {
						min-width: 90rpx;
						height: 48rpx;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 24rpx;
						opacity: 0.8;
						padding: 0 15rpx;
						position: absolute;
						top: 18rpx;
						left: 16rpx;
						z-index: 1;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}

					.tys {
						position: absolute;
						border-radius: 8rpx;
						bottom: 10rpx;
						left: 16rpx;
						display: flex;
						align-items: center;
						z-index: 1;

						.txt {
							border-radius: 4rpx;
							width: 60rpx;
							height: 30rpx;
							padding: 5rpx;
							color: #FFF;
							background: #000;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							margin-right: 10rpx;
						}

						.txt:nth-child(2n) {
							background: #50E3C2;
							color: #FFF;
						}
					}

					.status {
						display: flex;
						align-items: center;
						position: absolute;
						left: 34rpx;
						top: 48rpx;
						padding: 8rpx 12rpx;
						background: #141516;
						border-radius: 19rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #8F8F8F;

						text {
							margin-left: 12rpx;
						}

						&.next {
							color: #F3E0BC;

							::v-deep .u-icon__icon {
								color: #F3E0BC !important;
							}

							::v-deep .u-count-down__text {
								font-size: 24rpx;
								font-weight: 600;
								color: #F3E0BC;
							}

						}
					}
				}

				.item_cont {
					border-radius: 0 0 60rpx 60rpx;
					padding: 12rpx 18rpx 30rpx;

					.info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							line-height: 46rpx;
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.price {
							margin-top: 10rpx;

							.dw {
								font-size: 17rpx;
							}

							font-size: 32rpx;
							font-weight: 900;
							color: #000;
							line-height: 56rpx;
						}
					}

					.u-label {
						width: 146rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #9C9C9C 0%, #3B3B3B 100%);
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: 600;
						color: #FFFFFF;
						justify-content: center;
						margin-top: -8rpx;
						margin-bottom: 15rpx;
					}

					.tags {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 32rpx;
							margin: 5rpx 10rpx;
						}

						text {
							width: calc(100% - 36rpx);
							font-size: 20rpx;
							font-weight: 600;
							color: #6B5931;
						}

						line-height: 36rpx;
						border-radius: 8rpx;
						background: #FAEAC5;
						color: #6B5931;
						text-align: left;

					}

					.btm {
						display: flex;
						align-items: center;

						image {
							height: 36rpx;
							width: 36rpx;
							border-radius: 100%;
							margin-right: 10rpx;
							background: #f8f8f8;
						}

						.name {
							font-size: 24rpx;
							font-weight: 600;
							color: #222;
							line-height: 34rpx;
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}

		}
	}
	.indexs-list{
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		align-items: center;
		.indexs-list-item{
			margin-top: 35rpx;
			margin-bottom: 90rpx;
			width: calc(50vw - 45rpx);
			// background-color: #000618;
			height: 200px;
			// margin-right: 30rpx;
			.item-shopimg{
				width: 100%;
				height: 400rpx;
				border-radius: 2rpx;
				overflow: hidden;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.item-nullimg{
					position: absolute;
					top: calc(200rpx - 79rpx);
					left: calc(50% - 63rpx);
					width: 138rpx;
					height: 127rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				.timeImg{
					    top: 0;
					    right: 0;
						position: absolute;
						width: 140rpx;
						height: 40rpx;
						background-image: url("@/static/images/login/bianzutime.png");
					    background-size: 100% 100%;
						text-align: center;
						line-height: 40rpx;
					
						text{
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						    margin-left: 20rpx;
							
						}
					}
			}
			.item-shopInfo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-shopInfo-name{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #16172F;
				}
				.item-shopInfo-money{
					text:nth-child(1){
						font-size: 12rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #16172F;
					}
					text:nth-child(2){
						font-size: 28rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #16172F;
					}
				}
			}
		    .item-shopname{
				margin-top: -15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-shopname-info{
					display: flex;
					align-items: center;
					.item-shopname-info-img{
						width: 32rpx;
						height: 32rpx;
						overflow: hidden;
						border-radius: 50%;
					    display: flex;
						align-items: center;
					}
					image{
						width: 100%;
						height: 100%;
					}
					text{
						width: 150rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777E90;
						margin-left: 5rpx;
					}
				}
			    .item-shopname-num{
					text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777E90;
					}
				}
			}
		}
	}
	.empty{
		margin: auto;
	}
</style>
